<script setup lang="ts">
import { reactive } from 'vue';

interface Props {
  list: string[];
}
const props = withDefaults(defineProps<Props>(), {
  list: () => ['', ''],
});

const state = reactive<{
  list: { title: string; content: string }[];
}>({
  list: [
    { title: '人脸上传', content: '用户上传人脸照片' },
    { title: '人脸授权', content: '管理员对人脸授权' },
  ],
});
</script>

<template>
  <view class="app-face-upload-list">
    <view class="app-face-upload-item" v-for="(item, index) in state.list" :key="index">
      <view class="app-face-upload-item--left">
        <view
          class="app-face-upload-item__dot"
          :style="{ backgroundColor: props.list[index] === '已完成' ? '#507aee' : '#aaa' }"
          ><text>{{ index + 1 }}</text></view
        >
        <view class="app-face-upload-item__line" v-if="index + 1 !== list.length"></view>
      </view>
      <view class="app-face-upload-item--center">
        <view>
          <text>{{ item.title }}</text>
        </view>
        <view class="app-face-upload-item__content">
          <text>{{ item.content }}</text>
        </view>
      </view>
      <view class="app-face-upload-item--right">
        <text>{{ props.list[index] }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
